<template>
	<view class="container">
		<view class="infoform">
			<view class="infoformtexts">
				<text class="isatted">未认证</text>
				<view class="prompttext">
					<u-icon name="pushpin" size="30" color="#888"></u-icon>
					<text>提交后需管理员审核，工作日24小时候内处理</text>
				</view>
				<view class="prompttext">
					<u-icon name="pushpin" size="30" color="#888"></u-icon>
					<text>以下都是必填选项</text>
				</view>
			</view>
			<form @submit="" @reset="">
				<view class="infoformitem" style="margin-top: 40rpx;">
					<text class="infoitem-title">真实姓名</text>
					<input type="text" value="" placeholder="请输入身份证姓名"/>
				</view>
				<view class="infoformitem">
					<text class="infoitem-title">手机号码</text>
					<input type="number" value="" placeholder="请输入手机号码"/>
				</view>
				<view class="infoformitem">
					<text class="infoitem-title">紧急联系人</text>
					<input type="number" value="" placeholder="请输入手机号码"/>
				</view>
				<view class="infoformitem">
					<text class="infoitem-title">身份证照片</text>
					<text class="infoitem-atte">请上传本人身份证照片</text>
					<view class="uploadcard">
						<view class="card">
						    <view class="cardimgview">
						    	<image src="/static/img_213.png" mode=""></image>
						    </view>
							<text>上传身份证正面照</text>
						</view>
						<view class="card">
							<view class="cardimgview">
								<image src="/static/img_214.png" mode=""></image>
							</view>
							<text>上传身份证反面照</text>
						</view>
					</view>
				</view>
				<view class="infoformitem">
					<text class="infoitem-title">当前住址</text>
					<input type="text" value="" placeholder="请填写当前住址"/>
				</view>
				<view class="infoformitem">
					<view class="infoformcell" v-on:click="openGrouppopup()">
						<text>选择工种</text>
						<u-icon name="/static/navigate.png" size="30"></u-icon>
					</view>
					<text class="infoitem-atte" style="font-size: 30rpx;">最多可选择5个</text>
				</view>
				<view class="infoformitem">
					<view class="infoformcell">
						<text>有无货车</text>
						<u-icon name="/static/navigate.png" size="30"></u-icon>
					</view>
					<view class="infoform-radio">
						<radio-group>
							<label class="radio">
								<radio value="yes" color="#ff9900"/><text>有</text>
							</label>
							<label class="radio" style="margin-left: 50rpx;">
								<radio value="no" color="#ff9900"/><text>无</text>
							</label>
						</radio-group>
					</view>
				</view>
				<button form-type="submit">发布</button>
			</form>
		</view>
		<!-- 选择工种 弹出层 -->
		<u-popup v-model="showGrouppopup" border-radius="20" mode="bottom">
			<view class="groups">
				<view class="groupLeft">
					<view class="maingroup" v-for="(maingroup,maingroupIndex) in mainGroups" :class="{'active-maingroup':activeMain==maingroupIndex}">
						<text>{{maingroup}}</text>
					</view>
				</view>
				<view class="groupRight" style="background-color: #fff;margin-top: 20rpx;">
					<scroll-view scroll-y="true" style="height: 680rpx;width: 100%;padding-bottom: 20rpx;">
							<view class="secgroup" v-for="(secgroupitem,secgroupindex) in 30">
								<text>水电</text>
							</view>
					</scroll-view>
					<view class="confirmselected">
						<text>{{1}}/{{5}}选好了</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showGrouppopup:false,
				mainGroups:['硬装','成品安装','生活服务','家具','招聘监理'],
				activeMain:0
			}
		},
		methods: {
			openGrouppopup(){
				this.showGrouppopup=true;
			}
		}
	}
</script>

<style lang="scss">
    page{
	    width: 100%;
		height: 100%;
	}
	.container{
		 width: 100%;
		 min-height: 100%;
		 background-color: #F4F8FB;
		 .infoform{
			 background-color: #FFFFFF;
			 width: 100%;
			 height: auto;
			 padding-bottom: 20rpx;
			 padding-top: 20rpx;
			 position: relative;
			 top: 20rpx;
		 }
		 .infoformtexts{
			width: 680rpx;
			margin: auto;
			height: auto;
			.isatted{font-size: 35rpx;display: block;width: 100%;}
			.prompttext{margin-top: 20rpx;display: flex;align-items: flex-start;color: #888;font-size: 28rpx;}
		 }
		 .infoformitem{
			 width: 100%;
			 height: auto;
			 border-bottom: 1rpx solid #f1f1f1;
			 padding-bottom: 20rpx;
			 padding-top: 20rpx;
			 .infoitem-title{
				 font-size: 28rpx;
				 color: #555;
				 display: block;
				 width: 680rpx;
				 margin: auto;
			 }
			 input{
				 width: 680rpx;
				 height: 80rpx;
				 margin: auto;
				 font-size: 30rpx;
			 }
			 margin-top: 20rpx;
			 .infoitem-atte{
				 font-size: 25rpx;
				 color: #888;
				 margin: auto;
				 margin-top: 30rpx;
				 display: block;
				 width: 680rpx;
			 }
			 .uploadcard{
				 width: 680rpx;
				 height: auto;
				 margin: auto;
				 margin-top: 30rpx;
				 display: flex;
				 justify-content: space-between;
			 }
			 .card{
				 width:330rpx;
				 height: auto;
				 display: flex;
				 flex-wrap: wrap;
				 justify-content: center;
				 text{font-size: 25rpx;color: #555;margin-top: 20rpx;}
			 }
			 .cardimgview{
			   width: 100%;
			   box-sizing: border-box;
			   width: 330rpx;
			   height: 200rpx;
			   border: 1rpx solid #F1F1F1;
			   border-radius: 10rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   image{width: 300rpx;height: 180rpx;}
			}
			.infoformcell{
				width:680rpx;
				display: flex;
				justify-content: space-between;
				text{
					font-size: 28rpx;
					color: #555;
				}
				margin: auto;
			}
			.infoform-radio{
				width: 680rpx;
				margin: auto;
				margin-top: 30rpx;
			}
	    }
		.groups{
			display: flex;
		}
		.groupLeft{
			width:180rpx;
			height: 800rpx;
			background-color: #F1F1F1;
			margin-top: 20rpx;
			.maingroup{
			   width: 100%;
			   height: 80rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			}
			.active-maingroup{
				background-color: #61A3FB;
				color: #fff;
			}
		}
		.groupRight{
			display: flex;
			flex: 1;
			height: 800rpx;
			flex-wrap: wrap;
			.secgroup{
				background-color: #E7ECF2;
				font-size: 28rpx;
				border-radius: 30rpx;
				width: 160rpx;
				padding-top: 15rpx;
				padding-bottom: 15rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				text-align: center;
				float: left;
			}
			.confirmselected{
			   background-color: #18B566;
			   color: #FFFFFF;
			   height: 80rpx;
			   width: 530rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   font-size: 30rpx;
			   margin: auto;
			   margin-bottom: 10rpx;
			   border-radius: 10rpx;
			}
		}
		button{
			background-color: #18B566;
			color: #fff;
			width: 680rpx;
			margin: auto;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-top:20rpx;
		}
	}
</style>
